<template>
	<view class="order-detail-page app-order-top">
		<view class="title-w-box" :style="{paddingTop: navH + 'px', opacity: opacity}">
		</view>
		<view class="title-box" :style="{paddingTop: navH + 'px'}">
			<view class="main">租赁详情</view>
		</view>
		
		<view v-if="orderInfo">
			<view class="top-status">
				<image class="pic" src="../../static/images/ic-o-time.png" v-if="orderInfo._status._type == 11 || orderInfo._status._type == 0 || orderInfo._status._type == 111 || orderInfo._status._type == 3"></image>
				<image class="pic" src="../../static/images/ic-o-dfh.png" v-if="orderInfo._status._type == 1"></image>
				<image class="pic" src="../../static/images/ic-o-dsh.png" v-if="orderInfo._status._type == 2"></image>
				<image class="pic" src="../../static/images/ic-o-dsh.png" v-if="orderInfo._status._type == 33"></image>
				<image class="pic" src="../../static/images/ic-o-ywc.png" v-if="orderInfo._status._type == 4"></image>
				<view class="current-status" v-if="orderInfo._status._type == 11">
					<view class="main">订单待审核</view>
					<view class="sub">您的订单正在加急审核中，请耐心等待！</view>
				</view>
				<view class="current-status" v-if="orderInfo._status._type == 0">
					<view class="main">订单待付款</view>
					<view class="sub">您的订单还未付款，请及时付款</view>
				</view>
				<view class="current-status" v-if="orderInfo._status._type == 111">
					<view class="main">首期待付款</view>
					<view class="sub">您的首期还未付款，请及时付款</view>
				</view>
				<view class="current-status" v-if="orderInfo._status._type == 1">
					<view class="main">订单待发货</view>
					<view class="sub">您的订单正在加急审核中，审核通过将发货</view>
				</view>
				<view class="current-status" v-if="orderInfo._status._type == 2">
					<view class="main">订单待收货</view>
					<view class="sub">您的订单审核通过已发货，请注意物流信息</view>
				</view>
				<view class="current-status" v-if="orderInfo._status._type == 33">
					<view class="main">租用中</view>
					<view class="sub">您的订单租用中</view>
				</view>
		<!-- 			<view class="current-status" v-if="orderInfo._status._type == 3">
					<view class="main">订单待归还</view>
					<view class="sub"></view>
				</view> -->
				<view class="current-status" v-if="orderInfo._status._type == 4">
					<view class="main">订单已完成</view>
					<view class="sub">您的租赁订单已完成，感谢您的支持与理解！</view>
				</view>
			</view>
			
			<view class="address-info">
				<view class="express-box" @click="openTimeLine" v-if="orderInfo.delivery_name">
					<view class="info">
						<image src="../../static/images/icon/package.png"></image>
						<view class="s-title">物流信息</view>
						<view class="s-main ">{{orderInfo.delivery_name || ''}} | <text v-if="expressList[0]">{{expressList[0].status}}</text></view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="top">
					<view class="name">{{orderInfo.real_name}}</view>
					<view class="phone">{{orderInfo.user_phone}}</view>
				</view>
				<view class="address">收货地址：{{orderInfo.user_address}}</view>
			</view>
			
			<view class="goods-info">
				<view class="title acea-row row-between-wrapper">
					<view class="acea-row row-middle">
						<view class="acea-row row-middle">
							<image src="/static/images/icon/shop.png" class="mall-logo"></image>
							<text>直租侠</text> 
						</view>
					</view>
					<view v-if="orderInfo._status._type == 11" class="status font-color app-font-color">待审核</view>
					<view v-else-if="orderInfo._status._type == 0" class="status font-color app-font-color">待付款</view>
					<view v-else-if="orderInfo._status._type == 1" class="status font-color app-font-color">待发货</view>
					<view v-else-if="orderInfo._status._type == 2" class="status font-color app-font-color">待收货</view>
					<view v-else-if="orderInfo._status._type == 111" class="status font-color app-font-color">首期待支付</view>
					<view v-else-if="orderInfo._status._type == 33" class="status font-color app-font-color">租用中</view>
		<!-- 			<view v-else-if="orderInfo._status._type == 3" class="status font-color">待归还</view>-->
					<view v-else-if="orderInfo._status._type == 3" class="status font-color app-font-color">已完成</view> 
				</view>
				<view class="item-info acea-row row-between row-top">
					<view class="pictrue">
						<image :src="orderInfo.cartInfo[0].productInfo.image"></image>
					</view>
					<view class="text row-between">
						<text class="name line2">{{orderInfo.cartInfo[0].productInfo.store_name}}</text>
						<view class="choose">已选择：{{orderInfo.bill.lease_way}}；{{orderInfo.cartInfo[0].productInfo.attrInfo.suk}}；{{orderInfo.lease_term.label}}；1件</view>
						<view class="choose mt8">预估租期：{{orderInfo.lease_term.start_date}}-{{orderInfo.lease_term.end_date}}</view>
					</view>
					
					<view class="bottom">
						<text class="money"><text>共{{orderInfo.lease_term.label}}，总租金</text> ￥{{orderInfo.rent_price}}</text>
					</view>
				</view>
			</view>
			
			<view class="rent-info" v-if="orderInfo._status._type !== 11">
				<view class="top">
					<view class="left">首期应付账单</view>
					<view class="right">¥{{orderInfo.first_stage_price}}</view>
				</view>
				<view class="item">
					<view class="label">尾款租金</view>
					<view class="right">¥{{orderInfo.last_stage_price}}</view>
				</view>
				<view class="item">
					<view class="label">剩余租期</view>
					<view class="right">{{orderInfo.residue_stage}}期</view>
				</view>
				<view class="item">
					<view class="label">总租金</view>
					<view class="right">¥{{orderInfo.rent_price}}</view>
				</view>
				<view class="item">
					<view class="label">意外险</view>
					<view class="right">¥{{orderInfo.broker_screen_insurance}}</view>
				</view>
				<view class="item">
					<view class="label">配送方式</view>
					<view class="right">{{orderInfo.delivery_mode_label}}</view>
				</view>
				<view class="item">
					<view class="label">租赁方式</view>
					<view class="right">{{orderInfo.bill.lease_way}}</view>
				</view>
			</view>
			
			<view class="rent-info" v-if="orderInfo._status._type !== 11">
				<view class="top">
					<view class="left">冻结押金</view>
					<view class="right">¥{{orderInfo.pay_deposit_price }}</view>
				</view>
				<view class="item">
					<view class="label">商品押金</view>
					<view class="right">¥{{orderInfo.deposit_price }}</view>
				</view>
				<view class="item">
					<view class="label">平台规则减免</view>
					<view class="right">¥{{orderInfo.reduction_deposit_price}}</view>
				</view>
			<!-- 	<view class="item">
					<view class="label">芝麻信用减免</view>
					<view class="right"></view>
				</view> -->
			</view>
			
			<view class="accessory-info" v-if="orderInfo.accessory.length > 0">
				<view class="top">
					<view class="main">商品配件</view>
					<view class="sub">（套餐到期后需归还以下配件）</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in orderInfo.accessory">
						<view class="dot app-bac-color"></view>
						<view class="title">{{item.gift_name}}*{{item.gift_num}}</view>
						<view class="price">¥{{item.gift_price}}</view>
					</view>
				</view>
			</view>
			
			<view class="order-info">
				<view class="name">订单信息</view>
				<view class="item" >
					<view class="label">交易快照</view>
					<view class="right green app-font-color" @click="goSnapshot()">
						<text>发生交易争执时，可作为判断依据</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="item" v-if="orderInfo._status._type !== 11">
					<view class="label">租赁协议</view>
					<view class="right green app-font-color"  @click="toAgreement()">
						<text>查看协议</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="item">
					<view class="label">订单编号</view>
					<view class="right">
						<text>{{order_id}}</text>
						<text class="iconfont icon-fuzhi" @click="copy(order_id)"></text>
					</view>
				</view>
				<view class="item">
					<view class="label">创建时间</view>
					<view class="right">
						<text>{{orderInfo._add_time}}</text>
					</view>
				</view>
			</view>
			
			<view class="default-info">
				<view class="top">
					<view class="name">关于违约</view>
				<!-- 	<view class="right">
						<text >展开</text>
						<text class="iconfont icon-xiangxia"></text>
					</view> -->
				</view>
				<view class="about">
					租赁订单成立后，用户需诚实履约，否则当用户存在违约行为(如逾期交租、逾期归还)且达到《租赁服务协议》约定的买断情形时，商家可要求用户买断设备并支付买断款，买断款的计算方式为买断价-已缴纳逾期租金-已付租金-已付押金;订单到期时商家会提醒用户如期归还商品;对于商家承诺上门取货但未按指定日期取货的，不视为超期归还。</br>
					(1)租赁订单到期后30天内 (含)，则:</br>
					a.商家有权继续按照协议约定的租金标准收取用户超期费用超期费用=超期天数*日租金 (按订单续租的日租金计算) ;b.商家有权以10元/天向用户收取违约金。</br>
					(2)租赁订单到期后第31天起，用户未完成商品寄回的视为无法归还，商家可以要求用户买断设备并支付买断款。若用户有押金的，商家可以押金抵扣买断款，用户仍应支付剩余款项。买断款的计算方式为买断价-已缴纳逾期租金-已付租金-已付押金;
				</view>
			</view>
			
			<view style="height: 40rpx;"></view>
			
			<view class="fixed-bottom">
				<view class="bnt cancelBnt" @click="toQuestion(orderInfo.id)">客户问卷</view>
				<view class="bnt cancelBnt" @click="callPhone(orderInfo.merchantAddress[0].phone)">联系商家</view>
				<view class="bnt cancelBnt" v-if="orderInfo._status._type == 111 || orderInfo._status._type == 2 || orderInfo._status._type == 1 || orderInfo._status._type == 3" @click="goBillList(order_id, orderInfo.id)">查看账单</view>
				<view class="bnt toDo app-order-btn" v-if="orderInfo._status._type == 2" @click="confirmOrder(order_id)">确认签收</view>
				<view class="bnt toDo app-order-btn" v-if="orderInfo.user.is_attestation == 1 && orderInfo._status._type == 0 && orderInfo.is_contract !== 3" @click="goPay(order_id, orderInfo.id)">立即签约</view>
				<view class="bnt toDo app-order-btn" v-if="orderInfo.user.is_attestation == 1 &&  orderInfo._status._type == 0 && orderInfo.is_contract == 3" @click="goPay(order_id, orderInfo.id)">立即支付</view>
				<view class="bnt toDo app-order-btn" v-if="orderInfo.user.is_attestation == 0" @click="goPay(order_id, orderInfo.id)">去实名</view>
				<view class="bnt toDo app-order-btn" v-if="orderInfo._status._type == 111" @click="goPay2(order_id, orderInfo.waitBillOrderId)">首期支付</view>
				<!-- <view class="bnt toDo" v-if="orderInfo._status._type == 3" @click="goBackSpu()">立即归还</view> -->
			</view>
		</view>
		
		
		
		<u-popup mode="bottom" :show="showTimeline" @close="closePopup" round="24" :closeOnClickOverlay="true">
			<view class="timeline">
				<text class='iconfont icon-guanbi popup-close' @click='showTimeline = false'></text>
				
				<view class="timeline-name">物流信息</view>
				<view class="timeline-nav">
					<view style="display: flex;align-items: center;">
						<!-- <image src="https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/a45bf202302040210411960.png"></image> -->
						<text style="margin-left: 24rpx;">快递单号：{{orderInfo.delivery_id}}</text>
						
					</view>
					<view class="val" @click="copy(orderInfo.delivery_id)">
						<image src="../../static/images/icon/copy-2.png"></image>
					</view>
				</view>
				<scroll-view class="list" scroll-y="true"> 
					<view class="item" v-for="item in expressList">
						<view class="circle"></view>
						<view class="title">
							{{ item.status }}
							<view class="time">{{ item.time }}</view>
						</view>
					</view>
					<view class="line"></view>
				</scroll-view>
				
				<!-- <button class="pop-btn" @click="showTimeline = false">{{$t(`确认`)}}</button> -->
			</view>
		</u-popup>
		
		<callMerPhone ref="callPhone"></callMerPhone>
		
		<payWindow :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:totalPrice="totalPrice"></payWindow>
		
	</view>
</template>

<script>
	let app = getApp();
	import callMerPhone from '@/components/callMerPhone.vue'
	import { getOrderDetail, express, orderTake, isContract, contract, orderPay, getStageBillPay2, userSign} from '@/api/order.js'
	import payWindow from '@/components/payWindow';
	import {
		getUserInfo,
		isAttestation
	} from '@/api/user.js';	export default {
		components: {
			callMerPhone,
			payWindow
		},
		data() {
			return {
				appType: app.globalData.appType,
				opacity: 0,
				showTimeline: false,
				timeLineObj: {},
				order_id: '',
				orderInfo: null,
				userInfo: {},
				expressList: [],
				navH: "",
				payMode: [
					// {
					// 	name: '微信支付',
					// 	icon: 'icon-weixinzhifu',
					// 	value: 'weixin',
					// 	title: '使用微信快捷支付',
					// 	payStatus: true
					// },
					{
						name: '支付宝支付',
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: '使用线上支付宝支付',
						payStatus: true
					},
					{
						name: '银行卡支付',
						icon: 'icon-yuezhifu',
						value: 'yee_yjzf',
						title: '当前可用余额：',
						number: 0,
						payStatus: true
					}
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
			};
		},
		
		onLoad(options) {
			uni.getSystemInfo({
				success: (e) => {
					this.navH = e.statusBarHeight 
				}
			})
			if (options.order_id) {
				this.$set(this, 'order_id', options.order_id);
			}
		},
		onShow() {
			this.getOrderInfo();
			this.getUserInfo();
		},
 		methods: {
			toQuestion(id) {
				uni.navigateTo({
					url: '/pages/lease/question?orderId=' + id
				})
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 关闭支付组件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
			},
			payCheck(value) {
				const that = this
				this.pay_close = false;
				uni.showLoading({
					title: '加载中'
				})
				orderPay({
					uni: this.pay_order_id,
					paytype: value,
					// paytype: 'yee_yjzf',
					'from': 'weixin',
					quitUr: ''
				}).then(res => {
					uni.hideLoading()
					if (value === 'alipay') {
						uni.hideLoading()
						const prePayTn = res.data.result.jsConfig.prePayTn
						my.tradePay({
							tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
							success: (resd) => {
								if (
								  resd.resultCode == "9000" ||
								  resd.resultCode == "8000" ||
								  resd.resultCode == "6004"
								) {
								  uni.showToast({
								  	title: '支付成功'
								  })
								  that.loadend = false;
								  that.page = 1;
								  that.$set(that, 'orderList', []);
								  that.getOrderList();
								} else {
									return that.$util.Tips({
										title: '支付失败'
									});
									
								}
							},
							fail: (resd) => {
								console.log(resd, "支付状态");
							}
						})
						
					} else if (value === 'yee_yjzf') {
						const url = res.data.result.jsConfig.cashierUrl
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${url}`
						});
					}
				})
			},
			toAgreement() {
				uni.navigateTo({
					url: '/pages/annex/web_view/index?url=' + this.orderInfo.contract_url
				});
			},
			goPay2(id, arr) {
				const  that = this
				uni.showLoading({
					title: '支付中'
				})
				getStageBillPay2(id, {
					order_id: arr
				}).then(res => {
					uni.hideLoading()
					const prePayTn = res.data.result.jsConfig.prePayTn
					my.tradePay({
						tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
						success: (resd) => {
							if (
							  resd.resultCode == "9000" ||
							  resd.resultCode == "8000" ||
							  resd.resultCode == "6004"
							) {
							  uni.showToast({
							  	title: '支付成功'
							  })
							 this.getOrderInfo();
							 this.getUserInfo();
							} else {
								return that.$util.Tips({
									title: '支付失败'
								});
								
							}
						},
						fail: (resd) => {
							console.log(resd, "支付状态");
						}
					})
				})
			},
			onPageScroll(res) {
				var that = this,
					scrollY = res.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
					
			},
			
			callPhone(phone){
				this.$refs.callPhone.openCall(phone)
			},
			goSnapshot() {
				uni.navigateTo({
					url: '/pages/lease/order-snapshot?order_id=' + this.order_id
				})
			},
			goBackSpu() {
				uni.navigateTo({
					url: '/pages/lease/back-spu-info?order_id=' + this.order_id
				})
			},
			goPay: function(order_id, oid) {
				this.goAliPay(order_id, oid)
			},
			
			goAliPay(order_id, oid) {
				uni.showLoading({
					title: '支付中...'
				})
				isAttestation().then(res1 => {
					if (res1.status == 200) {
						uni.hideLoading()
						if (!res1.data.is_attestation) {
							uni.navigateTo({
								url: '/pages/lease/real-name'
							})
							return
						} else {
							
							if (this.orderInfo.is_contract == 0 || this.orderInfo.is_contract == 1 || this.orderInfo.is_contract == 2) {
								this.getContract(oid)
							} else {
								this.goOrderPay(order_id, oid)
							}
							
							// isContract(oid).then(res => {
							// 	if (res.status == 200) {
							// 		if (res.data.isContract == 0 || res.data.isContract == 1 || res.data.isContract == 2) {
							// 			this.getContract(oid)
							// 		} else {
							// 			this.goOrderPay(order_id, oid)
							// 		}
							// 	} else {
							// 		return that.$util.Tips({
							// 			title: res.msg
							// 		})
							// 	}
							// })
						}
					}
				})
			},
			
			goOrderPay(order_id, oid) {
				this.$set(this, 'pay_order_id', order_id);
				// this.$set(this, 'totalPrice', pay_price);
				
				
				// if (this.appType == 2) {
				// 	uni.hideLoading()
				// 	this.$set(this, 'pay_close', true)
				// } else {
					orderPay({
						uni: order_id,
						paytype: 'alipay',
						'from': 'alipay',
						quitUr: ''
					}).then(res => {
						const prePayTn = res.data.result.jsConfig.prePayTn
						my.tradePay({
							tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
							success: (resd) => {
								console.log(resd, "支付状态");
								this.getOrderInfo();
								this.getUserInfo();
							},
							fail: (resd) => {
								console.log(resd, "支付状态");
							}
						})
					})
				// }
			},
			
			getContract(oid) {
				
				userSign(oid).then(res => {
					if (res.status == 200) {
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${res.data.contract_url}`
						});
					} else {
						return that.$util.Tips({
							title: isCRes.msg
						});
					}
				})
			},
			privacy(type) {
				uni.navigateTo({
					url: "/pages/users/privacy/index?type=" + type
				})
			},
			confirmOrder(orderId) {
				let that = this;
				uni.showModal({
					title: '是否主动确认收货',
					content: '确认收货后需要立即支付账单费用，您可等待系统自动确认收货',
					success: function(res) {
						if (res.confirm) {
							orderTake(orderId ? orderId : that.order_id).then(res => {
								that.$util.Tips({
									title: '操作成功',
									icon: 'success'
								})
								that.getOrderInfo();
								that.getUserInfo();
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						}
					}
				})
			},
			goBillList(order_id, o_id) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
				uni.navigateTo({
					url: '/pages/lease/my-bill-detail?order_id=' + order_id + '&o_id=' + o_id
				})
			},
			getExpress: function() {
				let that = this;
				express(that.order_id).then(function(res) {
					let result = res.data.express.result || {};
					that.$set(that, 'expressList', result.list || []);
				}).catch((error) => {
					this.$util.Tips({
						title: error
					});
				});
			},
			getOrderInfo: function() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				let obj = getOrderDetail(this.order_id);
				obj.then(res => {
					that.$set(that, 'orderInfo', res.data);
					if (res.data.delivery_name) {
						this.getExpress();
					}
				})
				uni.hideLoading()
			},
			getUserInfo: function() {
				let that = this
				getUserInfo().then(res => {
					that.userInfo = res.data
				})
			},
			onTopTimeChange(e) {
				this.timeData = e
			},
			openTimeLine(){
				uni.showLoading({
					title: '加载中'
				})
				
				this.showTimeline = true
				uni.hideLoading()
				
			},
			closePopup(){
				this.showTimeline = false
			},
			copy: function(val) {
				let that = this;
				uni.setClipboardData({
					data: val,
					success: () =>
						uni.showToast({
						title: '已复制'
					})
				});
			},
		}
	};
</script>

<style lang="scss">
	.order-detail-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230515/c3c44d5a6759a32dbe8119dd03fc2bba.png');
		background-size: 100%;
		background-color: #F7F7F7;
		background-repeat: no-repeat;
		padding: 208rpx 24rpx 164rpx 24rpx;
		
		.top-status {
			display: flex;
			
			.pic {
				width: 48rpx;
				height: 48rpx;
			}
			
			.current-status {
				margin-left: 16rpx;
				
				.main {
					line-height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				
				.sub {
					margin-top: 32rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			}
		}
	
		.address-info {
			margin-top: 48rpx;
			padding: 32rpx 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.express-box {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				padding-bottom: 32rpx;
				border-bottom: 2rpx solid #F5F5F5;
				
				.info {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					overflow: hidden;
					
					image {
						width: 40rpx;
						height: 40rpx;
					}
					
					.s-title {
						margin-left: 16rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 32rpx;
					}
					
					.s-main {
						width: 100%;
						margin-top: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;
						
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			
				.iconfont {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.top {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
				
				.name {
					margin-right: 36rpx;
				}
			}
			
			.address {
				margin-top: 16rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 44rpx;
			}
		}
	
		.goods-info {
			margin-top: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #1F1F1F;
			
			.mall-logo {
				margin-right: 8rpx;
				width: 28rpx;
				height: 28rpx;
			}
			
			.title {
				height: 84rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #282828;
				border-bottom: 2rpx solid #FAFAFA;
				
				.sign {
					font-size: 24rpx;
					padding: 0 7rpx;
					height: 36rpx;
					margin-right: 15rpx;
				}
				
				
				.status {
					color: #1F1F1F;
					
					&.font-color {
						color: #39CCC2 ;
					}
				}
				
			}
			
			.item-info {
				padding: 0 30rpx;
				margin-top: 22rpx;
				
				.pictrue {
					width: 192rpx;
					height: 192rpx;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}
				
				.text {
					margin-left: 24rpx;
					flex: 1;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-top: 6rpx;
					
					.name {
						color: #282828;
						line-height: 48rpx;
					}
					
					.choose {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						word-break: break-all;
						
						&.mt8 {
							margin-top: 8rpx;
						}
					}
				}
			}
		
			.bottom {
				margin-top: 32rpx;
				border-top: 2rpx solid #FAFAFA;
				padding: 24rpx 0;
				width: 100%;
				
				.money {
					display: block;
					text-align: right;
					font-size: 32rpx;
					font-weight: bold;
					color: #FF1F2E;
					line-height: 44rpx;
					
					text {
						margin-right: 8rpx;
						font-size: 24rpx;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
			}
		}
	
		.accessory-info {
			margin-top: 24rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.top {
				display: flex;
				align-items: center;
				
				.main {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
				}
				
				.sub {
					margin-left: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		
			.list {
				padding-top: 8rpx;
				
				.item {
					margin-top: 24rpx;
					padding: 0 24rpx;
					width: 100%;
					height: 88rpx;
					background: #F8F9FA;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					
					.dot {
						width: 8rpx;
						height: 8rpx;
						background: #39CCC2;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,209,224,0.4);
						border-radius: 50%;
					}
					
					.title {
						flex: 1;
						margin-left: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
					}
					
					.price {
						margin-left: 24rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
					}
				}
			}
		}
		
		.rent-info {
			padding: 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.top {
				height: 80rpx;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					font-size: 32rpx;
					color: #1F1F1F;
					font-weight: bold;
				}
				.right {
					font-size: 48rpx;
					color: #1F1F1F;
					font-weight: bold;
				}
			}
			
			.item {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				
				.label {
					color: #666666;
				}
				
				.right {
					color: #1F1F1F;
				}
			}
		}
	
		.order-info {
			padding: 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.item {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
				
				.right {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
					
					text {
						margin-left: 18rpx;
					}
					
					.iconfont {
						font-size: 24rpx;
					}
					
					&.green { color: #39CCC2; }
				}
			}
		}
	
		.default-info {
			padding: 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.top {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
				
				.name {
					flex: 1;
				}
				
				.right {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					
					.iconfont {
						margin-left: 8rpx;
						font-size: 24rpx;
					}
				}
			}
		
			.about {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				word-break: break-all;
			}
		}
	
		.fixed-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			background-color: #fff;
			border-top: 2rpx solid #FAFAFA;
			padding: 0 24rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			
			.bnt {
				padding: 0 32rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 38rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.cancelBnt {
					border: 2rpx solid #F5F5F5;
					color: #1F1F1F;
				}
				
				&.toDo {
					background: #39CCC2;
					border: 2rpx solid #39CCC2;
					color: #fff;
				}
				
				&~.bnt {
					margin-left: 17rpx;
				}
			}
		}
	}

	.timeline {
		position: relative;
		padding: 40rpx 0 0 0;
		// max-height: 70vh;
		// overflow: scroll;
		
		.popup-close {
			position: absolute;
			right: 30rpx;
			top: 60rpx;
			z-index: 2;
			transform: translateY(-50%);
			font-size: 35rpx;
			color: #8a8a8a;
			font-weight: normal;
		}
		
		.timeline-name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
		
		.timeline-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			margin-top: 24rpx;
			width: 100%;
			height: 80rpx;
			background: #F5F5F5;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			
			image {
				width: 44rpx;
				height: 44rpx;
				border-radius: 8rpx;
			}
		}
		
		.list {
			margin-top: 38rpx;
			position: relative;
			padding-left: 44rpx;
			height: 800rpx;
			
			.item {
				position: relative;
				z-index: 14;
				display: flex;
				margin-top: 48rpx;
				
				&:first-child { 
					margin-top: 0; 
					
					// .title,.time {
					// 	color: #39CCC2;
					// }
					
					// .circle {
					// 	background: #39CCC2;
					// }
					
					// .title,.time {
					// 	color: #FF6933;
					// }
					
					// .circle {
					// 	background: #FF6933;
					// }
					
					.title,.time {
						color: #297EFF;
					}
					
					.circle {
						background: #297EFF;
					}
				}
				
				.circle {
					position: relative;
					z-index: 10;
					margin-right: 30px;
					margin-top: 12rpx;
					width: 18rpx;
					height: 18rpx;
					background: #B8B8B8;
					border-radius: 50%;
				}
				
				.title {
					flex: 1;
					margin-right: 30px;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					white-space: break-word;
				}
				
				.time {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #B8B8B8;
				}
			}
			
			.line {
				position: absolute;
				top: 16rpx;
				left: 52rpx;
				z-index: 10;
				width: 2rpx;
				height: calc(100% - 80rpx);
				background-color: #F5F5F5;
			}
		}
		
		.pop-btn {
			margin: 60rpx auto 0 auto;
			width: 430rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #39CCC2;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	
	.title-w-box {
		position: fixed;
	top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 80rpx;
		background-color: #fff;
		height: 170rpx;
	}
	
	.title-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 80rpx;
		height: 170rpx;
		.main {
			font-size: 32rpx;
			font-weight: bold;
			color: #1F1F1F;
		}
	}

</style>